<template>
  <el-drawer v-model="drawerFlag" direction="rtl">
    <template #header>{{ title }}</template>
    <template #default>
      <el-form ref="formRef" :model="formModel" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="拼音">
              <el-input v-model="formModel.pinyin" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="首字母">
              <el-input v-model="formModel.initial" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="声调">
              <el-select v-model="formModel.tone" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in toneList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="序列">
              <el-input v-model="formModel.sort_order" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="文件">
          <el-input v-model="formModel.audio_path" />

          <el-upload class="upload-demo" accept=".mp3" :show-file-list="false" :http-request="upload">
            <el-button type="primary">上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary">提交</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="拼音">
          <template #default="scope">
            {{ scope.row.pinyin }}
          </template>
        </el-table-column>
        <el-table-column label="首字母">
          <template #default="scope">
            {{ scope.row.initial }}
            <el-input v-model="formModel[scope.$index].initial" />
          </template>
        </el-table-column>
        <el-table-column label="声调">
          <template #default="scope">
            {{ scope.row.tone }}
          </template>
        </el-table-column>
        <el-table-column label="序列">
          <template #default="scope">
            {{ scope.row.sort_order }}
          </template>
        </el-table-column>
        <el-table-column label="文件">
          <template #default="scope">
            {{ scope.row.audio_path }}
          </template>
        </el-table-column>
        <el-table-column label="">
          <template #default>
            <el-button type="primary">保存</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button>取消</el-button>
      </div>
    </template>
  </el-drawer>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import type { ElForm } from 'element-plus'
import tool from '@/utils/uploadTool'

const emits = defineEmits(['close', 'submited'])

const toneList = ref<any[]>([
  { value: 0, label: 0 },
  { value: 1, label: 1 },
  { value: 2, label: 2 },
  { value: 3, label: 3 },
  { value: 4, label: 4 },
])
const drawerFlag = ref(false)
const title = ref('')
const formModel = reactive<any>({
  id: -1,
  pinyin: '',
  initial: '',
  tone: '',
  sort_order: 0,
  audio_path: '',
})

const tableData = reactive([])
const formRef = ref<InstanceType<typeof ElForm>>()

const open = async (data: any, options: any = {}) => {
  drawerFlag.value = true
  title.value = options.title || '编辑汉字拼音'
  console.log(data)
}

const upload = async (options: any) => {
  const res: any = await tool.oss.upload(options.file, (p: any) => {
    console.log('progress:', p)
  })
  // console.log('upload:', res)
  formModel.audio_path = res.res.requestUrls[0]
}
defineExpose({
  open,
})
</script>
<style lang="scss" scoped></style>
